<template>
	<view class="content">
		<block >
			<view class="headerBox">
				<view class="logo">
					<image :src="brandLogo"></image>
					<view  class="title">大川长风</view>
				</view>
				<view class="text" style="color: #00a044;" >
					<text></text><span>用完即走的理念，触手可及的梦想</span>
				</view>
			</view>
			<view class="infoBox">
				<view class="title">开通&定制专属小程序</view>
				<view class="text">请联系您的品牌经理</view>
				<view v-if="adminInfo.adminType==3" class="number" @click="getPhoneTap(adminInfo.mobile)">
					<view class="icon">
						<u-icon name="phone" size="20" color="#fff"></u-icon>
					</view>
					<view class="phone_number">
						{{adminInfo.mobile}}
					</view>
				</view>
				<view v-else class="number" @click="getPhoneTap(mobile)">
					<view class="icon">
						<u-icon name="phone" size="20" color="#fff"></u-icon>
					</view>
					<view class="phone_number">
						{{mobile}}
					</view>
				</view>
			</view>
			<view class="button_box"  @click="getMiniTap()">小程序定制案例</view>
		</block>
		<view class="phone_suspension" style="background: #00a044;" @click="getPhoneTap(adminInfo.mobile)" v-if="adminInfo.adminType==3">
			<u-icon name="phone" size="24" color="#fff"></u-icon>
		</view>
		<view class="phone_suspension" style="background: #00a044;" @click="getPhoneTap(mobile)" v-else>
			<u-icon name="phone" size="24" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import {searchAdminUserById, getApplicationRecommendedList} from '@/tools/request/api.js'
	export default {
		data() {
			return {
				qrcodeList: [],
				brandInfo: '',
				adminInfo:{},
				brandLogo: '',
				mobile: '17505713130'
			}
		},
		onLoad() {
			let self = this;
			let data={
				id: uni.getStorageSync('userConfig').adminId
			}
			searchAdminUserById(data).then((res=>{
				if(res.code==200){
					this.adminInfo=res.body
				}
			}))
			this.getSwiperList();
		},
		methods: {
			getPhoneTap(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			getCopyTap(text) {
				uni.setClipboardData({
					data: text,
					success: function() {}
				});
			},
			getMiniTap() {
				uni.navigateToMiniProgram({
					appId: 'wx86819f8a02fc11ab'
				})
			},
			async getSwiperList() {
				let data = {
					// businessId: '1722542778692751360',
					businessId: '-1',
					userServiceToken: 'T19WRD02BDT1TRQW4RFBI'
				}
				let bannerRes = await getApplicationRecommendedList(data);
				if (bannerRes.code != 200) return uni.$showMsg();
				let list = bannerRes.body;
				let swiperList = list.filter(item => item.type == 'brandLogo');
				if (swiperList.length) {
					this.brandLogo = swiperList[0].activityImgUrl;
				}
			},
		}
	}
</script>

<style lang="less">
	.headerBox {
		width: 100%;
		height: 340rpx;
		background-color: #00a044;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			display: flex;
			align-items: center;
			width: 85%;
			margin: 0 auto;
			justify-content: center;
			flex-direction: column;

			image {
				width: 70rpx;
				height: 70rpx;
			}

			.title {
				color: #fff;
				font-size: 38rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}
		}

		.text {
			color: #FFFFFF;
			font-size: 26rpx;
			background-color: rgba(255, 255, 255, 1);
			max-width: 600rpx;
			margin: 0 auto;
			height: 66rpx;
			border-radius: 100rpx;
			margin-top: 36rpx;
			line-height: 66rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
			position: relative;
			padding: 0 20rpx;

			span {
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			text {
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 20rpx solid rgba(255, 255, 255, 1);
				position: absolute;
				top: -20rpx;
				left: 0;
				right: 0;
				width: 0;
				height: 0;
				margin: 0 auto;
			}
		}
	}

	.infoBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 50rpx;

		.title {
			font-weight: bold;
			font-size: 38rpx;
			color: #222;
		}

		.text {
			color: #999;
			font-size: 28rpx;
			padding-top: 10rpx;
		}

		.number {
			width: 60%;
			height: 80rpx;
			background-color: #00a044;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			
			.icon{
				position: relative;
				top: 4rpx;
			}
			
			.phone_number{
				height: 50rpx;
				margin-left: 10rpx;
				position: relative;
				top: 4rpx;
			}
		}

		.intro {
			width: 400rpx;
			background-color: rgba(0, 169, 244, .1);
			margin-top: 30rpx;
			padding: 12rpx 0;
			border-radius: 6rpx;

			.tit {
				font-size: 24rpx;
				text-align: center;
			}

			.num {
				font-size: 48rpx;
				text-align: center;
			}
		}
	}
	
	.phone_suspension{
		position: fixed;
		bottom: 400rpx;
		right: 20rpx;
		z-index: 99999;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 20rpx 5rpx #cccccc;
	}

	.qrcode {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 60rpx;
		padding-bottom: 30rpx;

		.label {
			width: 250rpx;
			background-color: rgba(0, 169, 244, .1);
			border: 1px solid rgba(0, 169, 244, .3);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0;
			border-radius: 6rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.text {
				color: #222;
				font-size: 24rpx;
				padding-top: 20rpx;
			}
		}
	}

	.button_box {
		width: 60%;
		height: 80rpx;
		background-color: #00a044;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>
